<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-sys__dict">
      <div class="chart c2">
        <div class="age" ref="echartspic"></div>
        <div class="left" ref="sex"></div>
        <div class="right" ref="ticket"></div>
      </div>
      <el-form :inline="true">
        <span @click="reset()" class="all">全国</span>
        <el-form-item label="">
          <el-select
            v-model="dataForm.province"
            placeholder="省"
            clearable
            @change="
              (val) => {
                dataForm.city = '';
                regionChange(val, 'province');
              }
            "
          >
            <el-option
              v-for="item in provinceOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
          <el-select
            style="margin: 0 20px"
            v-model="dataForm.city"
            placeholder="市"
            clearable
            @change="
              (val) => {
                regionChange(val, 'city');
              }
            "
          >
            <el-option
              v-for="item in cityOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="value1"
            type="datetimerange"
            value-format="yyyy-MM-dd HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="area()">{{ $t("query") }}</el-button>
        </el-form-item>
      </el-form>
      <div class="chart">
        <div class="classfy">
          <template v-if="dataForm.province == ''">
            <div
              class="item"
              :class="type == item.id ? 'on' : ''"
              v-for="(item, index) in provinceOptions"
              :key="index"
              @click="look(item.id, 'province')"
            >
              <p>{{ item.name }}:{{ item | delData }}</p>
            </div>
          </template>
          <template v-if="dataForm.province != '' && dataForm.city == ''">
            <div
              class="item"
              :class="type == item.id ? 'on' : ''"
              v-for="(item, index) in cityOptions"
              :key="index"
              @click="look(item.id, 'city')"
            >
              <p>{{ item.name }}:{{ item | delData }}</p>
            </div>
          </template>
          <template v-if="dataForm.province != '' && dataForm.city != ''">
            <div
              class="item"
              :class="type == item.id ? 'on' : ''"
              v-for="(item, index) in areaOptions"
              :key="index"
            >
              <p>{{ item.name }}:{{ item | delData }}</p>
            </div>
          </template>
        </div>
        <div class="ditu1" ref="echartsdiqiu"></div>
        <!-- <div class="list">
                <div class="item" v-for="(item,index) in dataList">
                    <span>{{index+1}}</span>
                    <span>安徽</span>
                    <el-progress :percentage="parseFloat(item.count/total).toFixed(2)"></el-progress>
                </div>
            </div> -->
      </div>
    </div>
  </el-card>
</template>

<script>
var that;
var mapJson = null;
import mixinRegionModule from "@/mixins/region-module";
import * as echarts from "echarts";
require("echarts/theme/macarons"); // echarts theme
import "echarts/map/js/china.js";
export default {
  mixins: [mixinRegionModule],
  data() {
    return {
      mapType: "china",
      dataList: [], //区域分布
      ageData: [], //年龄分布
      type: "",
      value1: [],
      dataForm: {
        region: "",
        regionId: "",
        province: "",
        city: "",
        startDate: "",
        endDate: "",
      },
      center:[]
    };
  },
  created() {
    this.provincAreaDetailInfoList();
    this.area();
    this.gwtAgeData();
    this.getSex();
    this.getTicketAnalysis();
    that = this;
    mapJson = null;
  },
  watch: {
    value1(newval, oldval) {
      if (newval) {
        if (newval != oldval) {
          this.dataForm.startDate = newval[0];
          this.dataForm.endDate = newval[1];
        }
      } else {
        this.dataForm.startDate = "";
        this.dataForm.endDate = "";
      }
    },
    "dataForm.province"(newval, oldval) {
      console.log(newval);
      if (newval != oldval && newval != "") {
        this.cityAreaDetailInfoList(newval);
        this.look(newval, "province");
      } else {
        mapJson = null;
        this.dataForm.regionId = "";
        this.dataForm.region = "";
        this.area();
      }
    },
    "dataForm.city"(newval, oldval) {
      if (newval != oldval && newval != "") {
        this.countyAreaDetailInfoList(newval);
        this.look(newval, "city");
      } else {
        this.dataForm.regionId = this.dataForm.province;
        this.dataForm.region = "province";
        //this.area();
        this.look(this.dataForm.province, "province");
      }
    },
  },
  filters: {
    delData(val) {
      let itemval = that.dataList.filter((item) => item.region == val.id);
      if (itemval.length != 0) {
        return itemval[0].value;
      } else {
        return 0;
      }
    },
  },
  methods: {
    look(id, type) {
      this.dataForm.region = type;
      if (type == "province") {
        this.dataForm.province = id;
      } else {
        this.dataForm.city = id;
      }
      this.dataForm.regionId = id;
      this.$http.get("scenic/dataReport/getGeo/" + id).then((res) => {
        if (res.data.code == 0) {
          mapJson = res.data.data;
          this.center = mapJson.features[0].properties.center
          this.area();
        }
      });
    },
    area() {
      this.$http
        .get("/scenic/dataReport/selectStatisticsScenicRegion", {
          params: {
            endDate: this.dataForm.endDate,
            startDate: this.dataForm.startDate,
            region: this.dataForm.region,
            regionId: this.dataForm.regionId,
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            this.dataList = res.data.data.map((item) => {
              if (this.dataForm.regionId != "") {
                return {
                  name: item.name,
                  value: item.sumCount,
                  region: item.region,
                  child: item.child,
                };
              } else {
                return {
                  name: item.name
                    ? item.name.substring(0, item.name.length - 1)
                    : "",
                  value: item.sumCount,
                  region: item.region,
                  child: item.child,
                };
              }
            });
            this.initMap();
          }
        });
    },
    //获取性别比例
    getSex() {
      this.$http.get("/scenic/dataReport/sexRatio").then((res) => {
        if (res.data.code == 0) {
          this.initPieChart(res.data.data, "sex");
        }
      });
    },
    // 购票分析
    getTicketAnalysis() {
      this.$http.get("/scenic/dataReport/ticketAnalysis").then((res) => {
        if (res.data.code == 0) {
          this.initPieChart(res.data.data, "ticket");
        }
      });
    },
    initPieChart(list, name) {
      let myChart = echarts.init(this.$refs[name]);
      let list2 = [];
      if (name == "sex") {
        list2 = list.map((item) => {
          return {
            value: item.ratio,
            name: item.sex == "0" ? "女" : item.sex == "1" ? "男" : "未知",
          };
        });
      } else {
        list2 = list;
      }
      let title = name == "sex" ? "性别分布" : "购票分析";
      let option = {
        title: {
          top: 30,
          text: title,
          left: "30px",
          textStyle: {
            //字体风格,'normal','italic','oblique'
            fontStyle: "normal",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "bolder",
            //字体系列
            fontFamily: "san-serif",
            //字体大小
            fontSize: 18,
          },
        },
        legend: {
          show: true,
          top: "30px",
          right: "30px",
          textStyle: {
            color: "#666666",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },
        series: [
          {
            type: "pie",
            selectedMode: false,
            radius: "60%",
            center: ["50%", "55%"],
            color: ["#a814ff", "#1483FF", "#0AE3F4"],
            label: {
              normal: {
                show: true,
                position: "inside",
                textStyle: {
                  fontSize: "14",
                  color: "#FFFFFF",
                },
                formatter: "{d}%",
                rich: {
                  fonts: {
                    color: "#FFFFFF",
                    fontSize: "12",
                  },
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
                length: 5,
              },
            },
            data: list2,
          },
        ],
      };
      myChart.setOption(option);
    },
    gwtAgeData() {
      this.$http
        .get("/scenic/dataReport/selectDifferentAgeCount")
        .then((res) => {
          if (res.data.code == 0) {
            this.ageData = res.data.data.map((item) => {
              return {
                name: item.ageRange,
                value: item.dataCount,
              };
            });
            this.myEchartpic();
          }
        });
    },
    reset() {
      this.cityOptions = [];
      this.areaOptions = [];
      this.dataForm = {
        province: "",
        city: "",
        region: "",
        regionId: "",
      };
      mapJson = null;
      this.area();
    },
    // 圆形
    myEchartpic() {
      let myChart = echarts.init(this.$refs.echartspic);
      let option = {
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            // do some thing
            return params.name + "：" + params.value + "%";
          },
        },
        title: {
          top: 30,
          text: "年龄分布",
          left: "30px",
          textStyle: {
            //字体风格,'normal','italic','oblique'
            fontStyle: "normal",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "bolder",
            //字体系列
            fontFamily: "san-serif",
            //字体大小
            fontSize: 18,
          },
        },
        series: [
          {
            name: "Nightingale Chart",
            type: "pie",
            radius: [45, "60%"],
            center: ["50%", "50%"],
            roseType: "area",
            itemStyle: {
              borderRadius: 8,
            },
            data: this.ageData,
          },
        ],
      };
      myChart.setOption(option); // 渲染页面
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
    initMap() {
      if (mapJson) {
        echarts.registerMap("mapName", mapJson);
        this.mapType = "mapName";
      } else {
        this.mapType = "china";
      }
      // 基于准备好的dom，初始化echarts实例
      let chinaMap = echarts.init(this.$refs.echartsdiqiu);
      window.onresize = chinaMap.resize; // 窗口或框架被调整大小时执行chinaMap.resize
      chinaMap.setOption({
        layoutCenter: ["42%", "50%"], //位置
        layoutSize: "110%", //大小
        tooltip: {
          className: "custom-tooltip-bk-box", //添加一个类名
          triggerOn: "mousemove", // 鼠标移动时触发
          axisPointer: {
            type: "none",
          },
          // 鼠标移到图里面的浮动提示框
          // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter(params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let shengfen, shuliang, child;
            if (params.data) {
              shuliang = params.data.value;
              shengfen = params.data.name;
            } else {
              // 为了防止没有定义数据的时候报错写的
              shuliang = 0;
              shengfen = params.name;
            }
            if (params.data && params.data.child) {
              child = params.data.child;
            } else {
              child = [];
            }
            let str = "";
            for (let i = 0; i < child.length; i++) {
              str +=
                '<div style="display:flex;align-items: center"><p style="margin:0 0 10px 0;font-size:16px;color: #E0FFFF">' +
                child[i].scenicName +
                ':</p><p style="margin:0 0 10px 0;font-size:16px;color: #5EFB6E">' +
                child[i].count +
                "</p></div>";
            }
            let htmlStr = `
              <div class="custom-tooltip-box">
                <div style='font-size:18px;color: #E0FFFF;margin:10px 0 20px'> ${shengfen}<span style="margin-left:20px"> 总数：${shuliang}人</span></div>
                <div>
                  <div>
                        ${str}
                  </div>
                </div>
              </div> `;
            return htmlStr;
          },
          backgroundColor: "#3B3131", //提示标签背景颜色 这里设置为了透明色
          textStyle: {
            color: "#000",
          }, //提示标签字体颜色
        },
        title: {
          top: 30,
          text: "景区游客地区分布",
          left: "3%",
          textStyle: {
            //字体风格,'normal','italic','oblique'
            fontStyle: "normal",
            //字体粗细 'normal','bold','bolder','lighter',100 | 200 | 300 | 400...
            fontWeight: "bolder",
            //字体系列
            fontFamily: "san-serif",
            //字体大小
            fontSize: 18,
          },
        },
        visualMap: {
          min: 0,
          max: 1000,
          left: "3%",
          top: 200,
          showLabel: true,
          text: ["高", "低"],
          textStyle: {
            color: "red",
          },
          pieces: [
            {
              gt: 2000,
              label: "> 2000",
              color: "#ff5428",
            },
            {
              gte: 500,
              lte: 2000,
              label: "500 - 2000",
              color: "#00FFFF",
            },
            {
              gte: 100,
              lt: 500,
              label: "100 -500",
              color: "#6960EC",
            },
            {
              gt: 0,
              lt: 100,
              label: "0-100",
              color: "#EDDA74",
            },
          ],
          show: true,
        },
        geo: {
          map: this.mapType,
          center:this.center,
        //   center: [87.617733, 43.792818] // 设置地图中心点的坐标

          scaleLimit: {
            min: 0.9,
            max: 2,
          },
          zoom: 1,
          roam: true, //放大缩小地图、可拖拽
          label: {
            normal: {
              show: false, //省份名展示
              fontSize: "14", //省份字体大小
              color: "rgba(0,0,0,0.7)", //省份字体颜色
            },
          },
          emphasis: {
            show: true,
            textStyle: {
              color: "white", //鼠标移入省份字体颜色变化
              fontSize: "14px", //鼠标移入省份字体大小变化
            },
          },
          itemStyle: {
            normal: {
              borderColor: "rgba(0, 0, 0, 0.2)", //地图边框颜色
              //   areaColor: "skyblue", //地图背景颜色
            },
            emphasis: {
              show: true,
              areaColor: "#FFFF00", //鼠标放到地图上显示的颜色
              shadowOffsetX: 0,
              shadowOffsetY: 0,
              shadowBlur: 20,
              borderWidth: 0,
              shadowColor: "rgba(0, 0, 0, 0.5)",
            },
          },
        },
        series: [
          {
            type: "map",
            mapType: this.mapType,
            roam: false,
            geoIndex: 0,
            label: {
              normal: {
                show: true,
              },
              emphasis: {
                show: true,
              },
            },
            data: this.dataList,
          },
        ],
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.all {
  display: inline-block;
  font-size: 20px;
  cursor: pointer;
  font-weight: 600;
  margin-right: 10px;
  margin-top: 5px;
}

.chart {
  // display: grid;
  // grid-template-columns: 0 100%;
  // gap: 0 25px;
  margin-bottom: 10px;
  position: relative;

  &.c2 {
    display: grid;
    gap: 0 25px;
    grid-template-columns: 33% 33% 33%;

    > div {
      height: 370px;
    }
  }

  .ditu1 {
    height: 800px;
    width: 100%;
    border: 1px solid #eee;
  }
}

.classfy {
  position: absolute;
  right: 4%;
  top: 10%;
  z-index: 100;
  width: 360px;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  display: grid;
  text-align: center;
  gap: 15px;
  padding: 10px 20px;
  grid-template-rows: repeat(auto-fill, minmax(30px, 35px));
  height: auto;

  .item {
    height: 35px;
    line-height: 35px;
    position: relative;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    // padding: 6px 0px 4px;
    background-color: #fafafa;
    position: relative;

    p {
      margin: 0;
    }

    p:last-child {
      color: #8c8c8c;
      font-size: 13px;
    }

    p:first-child {
      color: #434343;
    }

    &.on {
      color: rgb(1, 113, 246);
      background-color: rgb(240, 247, 255);

      p {
        color: rgb(1, 113, 246);
      }
    }
  }
}
</style>
